<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
</head>

<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl shadow mb-5">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5 pr-5 text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse  row">
        <div class="offset-10 offset-sm-10 offset-md-10 offset-lg-10 offset-xl-10">
            <ul class="navbar-nav">
                <a class="nav-item nav-link mr-1 mt-2" href="/person" th:if="${avatar} == null">个人</a>
                <a class="nav-item nav-link mx-1" href="/person" th:if="${avatar} != null"><img th:src="${avatar}" style="height: 45px;width: 45px" class="rounded-circle"></a>
                <a class="nav-item nav-link mx-1 mt-2" href="/login">登录</a>
                <a class="nav-item nav-link ml-1 mt-2" href="/register">注册</a>
            </ul>
        </div>
    </div>
</nav>

<!--表单主体-->
<div class="container mt-5">
    <!--    错误提示框-->
    <div class="alert alert-warning alert-dismissible fade show" role="alert" th:if="${error} != null">
        <strong>出问题啦！</strong>  <span th:text="${error}"> 请输入详细信息之后再发布哦。</span>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <form action="/publish" method="post" th:if="${signal} != 1" enctype="multipart/form-data">

        <div class="input-group w-100 mb-4">
            <div class="input-group-prepend">
                <span class="input-group-text" id="addon-wrapping">文章标题</span>
            </div>
            <input type="text" id="title" name="title" class="form-control" autocomplete="off" th:value="${title}">
        </div>

        <div class="custom-file w-100 mb-4">
            <input onchange="showFilename(this.files[0])" type="file" class="custom-file-input" id="questionCoverPic" name="questionCoverPic">
            <label id="filename_label"  class="custom-file-label" for="questionCoverPic" data-browse="设置封面"  accept="image/*"></label>
        </div>

<!--        编辑器-->
        <div id="editor" class="w-100 mb-4">
<!--            要对p进行渲染，先获取html内容，再用js进行渲染，不会影响客户体验-->
            <p id="returnArticle" th:text="${article}"></p>
        </div>
        <script type="text/javascript">
            var returnArticle =  document.getElementById("returnArticle").innerText;
            document.getElementById("returnArticle").innerHTML = returnArticle;
        </script>

        <!--        隐藏的输入框，继承editor中的内容-->
        <input type="hidden" id="article" name="article">
<!--        隐藏的输入框，记录question的summary-->
        <input type="hidden" id="summary" name="summary">

        <div class="w-100">
            <button type="submit" class="btn btn-primary btn-lg btn-block">发&nbsp;&nbsp;布
            </button>
        </div>
    </form>
</div>



<!--javascript相关依赖以及代码-->
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="/js/editor.js"></script>
<script type="text/javascript">
    // input显示文件名
    function showFilename(file){
        $("#filename_label").html(file.name);
    }
</script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#editor')

    // 将带有样式的内容传递给input
    const $article = $('#article')
    // summary为内容摘要，纯文本
    const $summary = $('#summary')

    // html 为带标签的网页内容，该方法得目的是填写summary的内容给表单
    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $article.val(html)
        // txt为编辑栏中纯文本内容
        var text = editor.txt.text().toString();
        var length = text.length;
        if (length > 170){
            $summary.val(text.substring(0,170));
        } else{
            $summary.val(text);
        }
    }

    //配置指定文件名
    editor.config.uploadFileName = 'files';

    // 图片上传地址配置(后台post地址 server 接口地址)
    editor.config.uploadImgServer = 'imgUpload';

    // 限制上传五张
    editor.config.uploadImgMaxLength = 5

    // 定义菜单，默认情况下，显示所有菜单
    editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'quote',
        'emoticon',
        'image',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo',
    ]

    editor.config.emotions = [
        {
            title: 'emoji',  // tab 的标题
            type: 'emoji', // 'emoji' / 'image'
            // emoji 表情，content 是一个数组即可
            content: '😀 😃 😄 😁 😆 😅 🤣 😂 🙂 🙃 😊 🥰 😍 😗 😙 😋 😛 🤑 🤨 😑 😐 😏 🙄 🤐 🤢 🤧 🥶 🥵 😱 😖 😞 😕 🤓 😎 👌 🤚 🖐 🤞 🤟 👍 🖕 👎'.split(/\s/),
        }
    ]

    editor.create()

    // 初始化article的值
    $article.val(editor.txt.html())

</script>

</body>
</html>